<template>
    <div class="custom-info-box" ref="customInfoRef" v-if="chatDetail.app">
        <a-row class="info-item">
            <a-col flex="auto">
                <span class="info-key">来源：</span>
                <span class="info-value">
                    <span >{{ chatDetail.app.shortName }}( {{ chatDetail.app.name }} )</span>
                </span>
            </a-col>
            <a-col v-if="isClamped || isExpanded" suffix="true" flex="60px" >
                <span class="expand hover" @click="toggleExpand">
                    {{ isExpanded ? '收起描述' : '展开描述' }}
                </span>
            </a-col>
        </a-row>
        <div class="info-item">
            <span class="info-key">主题：</span>
            <span class="info-value">
                <a :href="chatDetail.sourceUrl" target="_blank"> {{ chatDetail.name }} </a>
            </span>
        </div>
        <div class="info-item">
            <span class="info-value">
                <span ref="textElementRef" class="remark-span" :class="{ 'clamped': isClamped }">
                     <span class="info-key">描述：</span>{{ chatDetail.remark }}
                </span>
            </span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import mitt from "@/utils/bus";
const customInfoRef = ref(null);
const isExpanded = ref(false); // 控制是否展开
const isClamped = ref(false); // 控制是否超出两行
const textElementRef = ref(null); // 获取文本元素
const emit = defineEmits(['handleBtn']);
interface ChatDetail {
    name: String,
    sourceUrl?: String,
    remark?: String,
    app?: {
        name: String,
        shortName: String
    },
}
const chatDetail: ChatDetail = ref({
    name: '',
    app: null,
})

// 动态检查文本是否超出两行
watch(() => textElementRef.value, e => {
    if (e) {
        const element = e;
        const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
        const maxHeight = lineHeight * 2;  // 假设每行的高度等于lineHeight，限制为两行
        // 判断是否超过了2行
        isExpanded.value = false;
        isClamped.value = element.scrollHeight > maxHeight;
    }
 }, {
    deep: true,
    immediate: true
})
// 切换展开/收起状态
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
    isClamped.value = !isClamped.value;
    nextTick(() => {
        mitt.emit('customInfoHeight', customInfoRef.value?.clientHeight);
    })
};

// 会话详情
mitt.on('chatDetail', e => {
    chatDetail.value = e;
    nextTick(() => {
        mitt.emit('customInfoHeight', customInfoRef.value?.clientHeight);
    })
})
</script>

<style lang="scss" scoped>
.custom-info-box {
    border: 1px solid #91caff;
    border-radius: 4px;
    padding: 16px;
    background-color: #e6f4ff;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    position: absolute;
    left: 10px;
    width: calc(100% - 20px);
    top: 67px;
    z-index: 9;
    .info-item {
        &:not(:last-child){
            margin-bottom: 8px;
        }
        .expand {
            font-size: 13px;
            color: #1890ff;
        }
    }

    .info-key {
        font-weight: bold;
        color: #595959;
    }

    .info-value {
        color: #333;
    }

    .info-value.is-link a {
        color: #1890ff;
        text-decoration: none;
    }

    .info-value.is-link a:hover {
        text-decoration: underline;
    }
    .remark-span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .clamped {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 限制显示2行 */
        -webkit-box-orient: vertical;
    }
}
</style>

